<template>
	<view class="applyForm background" v-loading="loading">
		<!-- 应聘报名表 -->
		<view class="my_main">
			<el-form ref="form" :model="ruleForm" :rules="rules" label-width="80px" label-position="top">
				<view id="" v-for="(item, index) in ruleForm.templateValue" :key="index">
					<p class="my_main_title fonts18 fontz fontw700">{{ item.name }}</p>
					<view class="">
						<view class="" v-for="(items, indexs) in item.setData" :key="indexs">
							<el-form-item v-if="items.type == 'text'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: items.rulesBool, message: '请输入' + items.label, trigger: 'blur' }]">
								<el-input :disabled="indexValueBool" style="width:100%;" v-model="items.value"
									:placeholder="`${'请输入' + items.label}`"></el-input>
							</el-form-item>
							<el-form-item v-if="items.type == 'textarea'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: items.rulesBool, message: '请输入' + items.label, trigger: 'blur' }]">
								<el-input :disabled="indexValueBool" type="textarea" style="width:100%;"
									v-model="items.value" :placeholder="`${'请输入' + items.label}`"></el-input>
							</el-form-item>
							<el-form-item v-if="items.type == 'select'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: items.rulesBool, message: '请选择' + items.label, trigger: 'blur' }]">
								<el-select :disabled="indexValueBool" clearable v-model="items.value"
									:placeholder="`${'请选择' + items.label}`" style="width:100%">
									<el-option v-for="item in getDict(items.dictValue)" :label="item.dictLabel"
										:value="item.dictValue">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="items.type == 'date-picker'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: items.rulesBool, message: '请选择' + items.label, trigger: 'blur' }]">
								<el-date-picker :disabled="indexValueBool" type="date" format="yyyy-MM-dd"
									value-format="yyyy-MM-dd HH:mm:ss" :placeholder="`${'请选择' + items.label}`"
									v-model="items.value" style="width:100%;">
								</el-date-picker>
							</el-form-item>

							<el-form-item v-if="items.type == 'uploadImage'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: `${items.rulesBool}`, message: '请上传图片', trigger: 'blur' }]">
								<el-upload :disabled="indexValueBool" style="width: 120px;height: 120px;"
									class="avatar-uploader" :headers="headers" :action="action" :show-file-list="false"
									:before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
									<image style="width: 120px;height: 120px;margin-top: 15px;" v-if="items.value"
										@click="beforeClick(index, indexs)" :src="items.value" class="avatar" />
									<i v-else @click="beforeClick(index, indexs)"
										class="el-icon-plus avatar-uploader-icon" style="width: 120px;height: 120px;display: flex;justify-content: center;align-items: center;"></i>
								</el-upload>
							</el-form-item>
							<el-form-item v-if="items.type == 'uploadImages'" :label="items.label"
								:prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
								:rules="[{ required: items.rulesBool, message: '请上传图片', trigger: 'blur' }]">
								<view @click="beforeClick(index, indexs)" class="flex">
									<el-upload :disabled="indexValueBool" class="avatar-uploaders" :headers="headers"
										:action="action" :before-upload="beforeAvatarUpload" list-type="picture-card"
										:on-preview="handlePictureCardPreview" :on-remove="handleRemove"
										:on-success="handleAvatarSuccess" :file-list="items.value">
										<i style="width: 120px;height: 120px;"
											class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</view>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>

							</el-form-item>
						</view>
					</view>
				</view>
			</el-form>
		</view>
		<view class="position_footer flex aic jcsb">
			<el-button type="" style="width: 48%;" @click="back()">返回</el-button>
			<el-button class="blue_btn" style="width: 100%;" type="primary" @click="submitForm('form')">提交
			</el-button>
		</view>
	</view>
</template>

<script>
	import {
		formTemplate,
		formAdd,
		formDetail,
		formTemplateput,
		formput,
		formTemplatepadd
	} from "@/api/my.js"
	import {
		dictSect,
		dictFun,
		dictFuns
	} from "@/util/dictionary.js"
	import {
		URL_IP_HOST,
		URL_PREFIX
	} from '@/util/constant.js'
	export default {
		data() {
			var userInfoData_ = uni.getStorageSync("userInfoData_")
			return {
				indexValue: 0,
				loading: false,
				loadings: false,
				nowData: [],
				id: "",
				ids: "",
				templateValue: [],
				ruleForm: {
					templateValue: []
				},
				rules: {},
				headers: {
					"Authorization": `Bearer ${userInfoData_ ? userInfoData_.access_token : ""}`,
					"clientid": userInfoData_ ? userInfoData_.client_id : "eeb9377d4b6debbc0a6e8756bbbbb4c7"
				},
				action: URL_IP_HOST + "/application/oss/upload",
				dialogImageUrl: '',
				dialogVisible: false,
				indexV: "",
				indexS: "",
				id_b: "",
				bool: false, //post、put
				reportIds: "",
				reportIdEdit: "",
				datas_b: {},
				showBool: false,
				indexValueBool: false,

			};
		},
		onLoad(option) {
			let data = JSON.parse(option.data)
			console.log("应聘表传参数据",data);
			this.id = data.registrationFormTemplateId
			this.ids=data.id
			this.reportIds = data?.positionRegistration?.registrationFromId
			this.reportIdEdit = data?.positionRegistration?.id
			this.indexValueBool = option.indexValue < 2 ? false : true
			console.log("报名表模板:", this.id, "原职位ids:", this.ids, "报名表id:", this.reportIds, "indexValue", option.indexValue);
			// this.indexValue = this.getUrlParams().indexValue
			// this.id = this.getUrlParams().id
			// this.ids = this.getUrlParams().ids
			console.log("报名表id:", this.id, "原职位ids:", this.ids);
			this.formTemplateApi(this.id)
			// this.info()

		},
		methods: {
			back() {
				uni.navigateBack(-1)
			},
			async formTemplateApi(data) {
				this.loading = true
				await formTemplate(data).then(res => {
					this.loading = false
					this.templateValue = JSON.parse(res.data.templateValue)
					console.log(this.templateValue);
					this.ruleForm.templateValue = this.templateValue
					if (this.templateValue.length != 0) {
						this.indexValue = this.templateValue[0].id
					}
					if (this.reportIds!=undefined) {
						console.log("我进来了！");
						this.formDetailApi(this.reportIds)
					} else {
						this.loading = false
						this.bool = true
						this.showBool = true
					}
					// this.formDetailApi(this.ids)
				})
			},
			classClick(item) {
				this.indexValue = item.id
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.ruleForm);
						// alert('submit!');
						if (this.bool) { //新增报名表信息
							let data = {
								formValue: JSON.stringify(this.ruleForm.templateValue)
							}
							this.formTemplateAddApi(data)
						} else { //修改报名表信息
							this.datas_b.formValue = JSON.stringify(this.ruleForm.templateValue)
							this.formputApi(this.datas_b)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getDict(res) {
				return dictSect(res)
			},
			handleAvatarSuccess(res, file, fileList) {
				file.url = res.data.url
				file.ossId = res.data.ossId
				console.log(this.indexV,this.indexS);
				if (this.ruleForm.templateValue[this.indexV].setData[this.indexS].type == 'uploadImage') {
					this.ruleForm.templateValue[this.indexV].setData[this.indexS].value = res.data.url
				} else {
					this.ruleForm.templateValue[this.indexV].setData[this.indexS].value = fileList
					// this.ruleForm.templateValue[this.indexV].setData[this.indexS].value.push(res.data)
					console.log("多文件上传", fileList);
				}
				// this.imageUrl = URL.createObjectURL(file.raw);
				console.log("图片上传成功：", res);
			},
			beforeAvatarUpload(rawFile) {
				console.log("图片上传格式：", rawFile);
				if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png') {
					this.$message({
						message: '图片格式有误! 仅支持jpg、jpeg、png格式!',
						type: 'error',
					});
					return false
				} else if (rawFile.size / 1024 / 1024 > 2) {
					this.$message({
						message: '图片大小不超过2MB!',
						type: 'error',
					});
					return false
				}
				// return isJPG && isLt2M;
			},
			handleRemove(file, fileList) {
				console.log("删除", file);
				this.deleteListFun(file)
				// console.log(this.ruleForm.templateValue[this.indexV].setData[this.indexS].value);
			},
			handlePictureCardPreview(file) {
				console.log(file);
				this.dialogVisible = true;
				this.dialogImageUrl = file.url;
			},
			beforeClick(index, indexs) {
				console.log(index, indexs);
				this.indexV = index
				this.indexS = indexs
			},
			deleteListFun(file) {
				let indexV = "",
					indexS = "",
					index2 = ""
				this.ruleForm.templateValue.forEach((element, key) => {
					console.log(element, key);
					element.setData.forEach((el1, key1) => {
						console.log(typeof el1.value);
						if (typeof el1.value == "array") {
							el1.value.forEach((el2, key2) => {
								if (file.ossId == el2.ossId) {
									indexV = key;
									indexS = key1;
									index2 = key2
								}
							})
						}
					})
				});
				if (indexS != "" && indexV != "" && index2 != "") {
					this.ruleForm.templateValue[indexV].setData[indexS].value.splice(index2, 1)
					console.log(this.ruleForm.templateValue[indexV].setData[indexS].value);
				}
			},
			async formTemplateAddApi(data) { //新增报名表信息
				this.loading = true
				formAdd(data).then(res => {
					console.log("添加报名表信息：", res);
					let obj = {
						positionId: this.ids,
						registrationFromId: res.data
					}
					this.formTemplateputaddApi(obj)
				}).catch(res => {
					this.loading = false
				})
			},
			async formputApi(data) { //修改报名表信息
				this.loading = true
				formput(data).then(res => {
					console.log("修改报名表信息：", res);
					let obj = {
						id: this.reportIdEdit,
						registrationFromId: res.data
					}
					this.formTemplateputApi(obj)
				}).catch(res => {
					this.loading = false
				})
			},
			async formTemplateputApi(data) { //修改职位绑定
				formTemplateput(data).then(res => {
					this.loading = false
					console.log(res);
					this.$message({
						message: res.msg,
						type: 'success',
					});
				}).catch(res => {
					this.loading = false
					this.$message({
						message: res.msg,
						type: 'error',
					});
				})
			},
			async formTemplateputaddApi(data) { //新增职位绑定投递
				formTemplatepadd(data).then(res => {
					this.loading = false
					console.log(res);
					this.$message({
						message: res.msg,
						type: 'success',
						center: true,
						offset: 0.1
					});
				}).catch(res => {
					this.loading = false
					this.$message({
						message: res.msg,
						type: 'error',
						center: true,
						offset: 0.1
					});
				})
			},
			async formDetailApi(data) { //查询详细信息
				this.loading = true
				await formDetail(data).then(res => {
					this.loading = false
					console.log(res);
					if (res.data) {
						this.datas_b = res.data
						let array = JSON.parse(res.data.formValue)
						this.ruleForm.templateValue = []
						array.forEach(element => {
							this.ruleForm.templateValue.push(element)
						})
						this.bool = false //存在报名表信息

					} else {
						this.ruleForm.templateValue = this.templateValue
						this.bool = true
					}
					console.log(this.ruleForm.templateValue);
					this.showBool = true
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.avatar-uploader {
		width: 120px;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		overflow: hidden;
	}

	.applyForm {
		position: relative;
		height: calc(100vh - 110px);
		width: 100%;
		overflow-y: auto;
		padding-bottom: 60px;

	}

	.position_footer {
		height: 40px;
		z-index: 1;
		position: fixed;
		bottom: 0;
		background: #ffffff;
		box-shadow: 0px -1px 3px 0px rgba(48, 48, 48, 0.0592);
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		width: calc(100% - 24px);
		padding: 12px;

		.blue_btn {
			background: #2F6CBC;
			border: 1px solid #2F6CBC;
		}
	}

	.asdise_content {
		width: 100%;
		min-height: 600px;
		max-height: 925px;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		border: 1px solid #CACFD6;
		// padding: 0px 30px;

	}

	.my_main {
		padding: 26px;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		border: 1px solid #CACFD6;
		min-height: 700px;

		.my_main_title {
			color: #3D3D3D;
			position: relative;
			margin-bottom: 23px;
			display: flex;
			align-items: flex-end;
			position: relative;

			&::after {
				top: 5px;
				left: -26px;
				position: absolute;
				content: "";
				width: 4px;
				height: 16px;
				background: #2F6CBC;
				border-radius: 0px 2px 2px 0px;
				opacity: 1;
			}

			span {
				margin-left: 20px;
				color: #898989;
			}

			.el-button {
				float: right;
				width: 88px;
				height: 30px;
				// background: #2F6CBC;
				border-radius: 8px 8px 8px 8px;
				opacity: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 16px;
			}
		}
	}

	.my_grid {
		display: grid;
		grid-template-columns: repeat(2, 45%);
		position: relative;

		.el-input {
			width: 348px;

			.el-input__inner {
				width: 100%;
			}
		}

		.my_grid_delete {
			position: absolute;
			top: 0px;
			right: 0px;
			width: 88px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.asdise_content_ul {
		list-style: none;
		padding: 0;

		li {
			padding: 0px 21px;
			line-height: 48px;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			img {
				width: 24px;
				height: 24px;
			}
		}

		.blue {
			color: #FFFFFF;
			background: #2F6CBC;
		}
	}

	.indexNav_content {
		height: 70px;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		border: 1px solid #CACFD6;

		img {
			width: 24px;
			height: 24px;
			margin: 0px 23px;
		}

	}
</style>
